<template>
  <div class="warp">
    <pay-success v-if="showPaySucclayer" @close="SuccesClose"></pay-success>
    <pay-confrim v-if="showPaylayer" @close="SuccesClose" @pay="Pay" @cancel="Cancel"></pay-confrim>
    <div class="header continer">
      <i class="iconfont icon-zuojiantou" @click="Back"></i>
      <h4>确认订单</h4>
    </div>
    <div class="main continer">
      <div class="address">
        <div class="info">
          <h4 class="title">收货地址</h4>
          <p class="detail">{{ address.detail }}</p>
          <p class="uinfo">
            <span class="username">{{ address.username }}</span
            ><span class="phone">{{ address.phone }}</span>
          </p>
        </div>
        <div class="select" @click="SelectAddress">
          <i class="iconfont icon-youjiantou"></i>
        </div>
      </div>
      <div class="cartinfo">
        <div class="item">
          <div class="title">
            <h4>{{ orderModel.shopName }}</h4>
          </div>
          <div
            class="shop"
            v-for="(item, index) in orderModel.items"
            :key="index"
          >
            <div class="shoppic">
              <img :src="item.img" />
            </div>
            <div class="right">
              <p class="shop_name">{{ item.name }}</p>
              <p>
                <span class="number">{{ item.price }} x {{ item.number }}</span>
                <span class="total_price"
                  >¥{{ (item.price * item.number).toFixed(2) }}</span
                >
              </p>
            </div>
          </div>

          <div class="close">共计{{ orderModel.items.length }}件/1.4kg</div>
        </div>
      </div>
    </div>
    <div class="footer">
      <p class="price">实付金额 ¥{{ totalPrice }}</p>
      <span @click="Sumbit" class="btnSumbit">提交订单</span>
    </div>
  </div>
</template>
<script>
import PayConfrim from "./components/PayConfrim.vue";
import PaySuccess from "./components/PaySuccess.vue";
export default {
  created() {
    this.orderId = this.$route.query.orderId;

    let orderList = this.$store.state.order.orderList;
    let index = orderList.findIndex((item) => {
      return item.orderId == this.orderId;
    });
    if (index > -1) {
      this.orderModel = orderList[index];
    }
    this.totalPrice = this.orderModel.totalPrice;

    this.SetAddress();
  },

  data() {
    return {
      address: {
        addressId: 0,
        detail: "",
        username: "",
        phone: "",
      },
      totalPrice: 0,
      orderId: 1,
      orderModel: [],
      showPaySucclayer: false,
      showPaylayer: false,
    };
  },
  methods: {
    SetAddress() {
      let addressId = this.$route.query.addressId;

      let addressList = this.$store.state.address.AddressList;
      if (addressList.length > 0) {
        let addressinfo = addressList[0];
        if (addressId > 0) {
          var index = addressList.findIndex((item) => {
            return item.id == addressId;
          });

          if (index >= 1) addressinfo = addressList[index];
        }
        this.address.addressId = addressinfo.id;
        this.address.username = addressinfo.username;
        this.address.phone = addressinfo.phone;
        this.address.detail =
          addressinfo.city + addressinfo.area + addressinfo.house;
      }
    },
    //选择收货地址
    SelectAddress() {
      this.$router.push({
        path: "/Address",
        query: {
          orderId: this.orderId,
          from: "order",
        },
      });
    },
    Back() {
      this.$router.go(-1);
    },
    Sumbit() {
      this.showPaylayer = true;
    },
    //取消订单
    Cancel() {
    
      this.showPaylayer = false;
      //修改订单状态为取消
       
      this.$store.commit("order/setOrderInfo", {
          orderId: this.orderId,
          addressId:this.address.id,
          order_status:2
        });
      this.$router.push({ name: "Order" });
    },
    //支付
    Pay() {
      this.showPaylayer = false;
      this.showPaySucclayer = true;
      //修改状态为支付成功
      this.$store.commit("order/setOrderInfo", {
          orderId: this.orderId,
          addressId:this.address.id,
          order_status:1
        });
        
    },
    SuccesClose() {
      this.showPaySucclayer = false;
      this.$router.push({ name: "Order" });
    },
  },
  name: "OrderSumbit",
  components: { PayConfrim, PaySuccess },
};
</script>
<style lang="scss" scoped>
.continer {
  padding: 0 18px;
}
.warp {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #f8f8f8;
  .header {
    color: #ffffff;
    display: flex;
    background-image: linear-gradient(
      0deg,
      rgba(0, 145, 255, 0) 4%,
      #0091ff 50%
    );
    height: 142.5px;

    line-height: 68px;
    .icon-zuojiantou {
      font-size: 18px;
      color: #ffffff;
    }
    h4 {
      flex: 1;
      text-align: center;

      font-family: PingFangSC-Regular;

      font-size: 16px;
      color: #ffffff;
    }
  }
  .main {
    position: absolute;
    top: 80px;
    width: 100%;
    .address {
      padding: 16px;
      display: flex;
      justify-content: space-between;
      background: #ffffff;
      border-radius: 4px;
      .info {
        .title {
          font-family: PingFangSC-Medium;
          font-size: 16px;
          color: #333333;
          font-weight: bold;
          margin-bottom: 14px;
        }
        .detail {
          font-family: PingFangSC-Regular;
          font-size: 14px;
          color: #333333;
          margin-bottom: 6px;
        }
        .uinfo {
          font-family: PingFangSC-Regular;
          font-size: 12px;
          color: #666666;
          .username {
            margin-right: 6px;
          }
        }
      }
      .select {
        font-weight: bold;
        display: flex;
        -ms-flex-direction: column;
        align-items: center;
      }
    }
    .cartinfo {
      //position: absolute;

      //margin: 0 18px;
      .item {
        margin: 16px 0px;
        background-color: white;
        padding: 16px;
        .title {
          font-family: PingFangSC-Medium;
          font-size: 16px;
          color: #333333;
        }

        .shop {
          margin-top: 16px;
          display: flex;

          .shoppic {
            margin-right: 16px;
            img {
              width: 46px;
              height: 46px;

              border: none;
            }
          }
          .right {
            flex: 1;
            position: relative;
            .shop_name {
              font-family: PingFangSC-Medium;
              font-size: 14px;
              color: #333333;
            }
            p {
              line-height: 23px;
            }
            .price {
              font-family: PingFangSC-Regular;
              font-size: 14px;
              color: #e93b3b;
              text-align: right;
            }
            .number {
              font-family: PingFangSC-Regular;
              font-family: PingFangSC-Regular;
              font-size: 14px;
              color: #e93b3b;
            }
            .total_price {
              font-family: PingFangSC-Regular;
              font-size: 14px;
              color: #000000;
              text-align: right;
              position: absolute;
              bottom: 0;
              right: 0;
            }
          }
        }
        .close {
          margin-top: 16px;
          height: 28px;
          background: #f5f5f5;
          line-height: 28px;
          text-align: center;
          font-family: PingFangSC-Light;
          font-size: 14px;
          color: #999999;
        }
      }
    }
  }
  .footer {
    width: 100%;
    padding-left: 18px;
    background: #ffffff;
    position: absolute;
    bottom: 0px;
    height: 49px;
    display: flex;
    justify-content: space-between;
    .price {
      line-height: 49px;
      font-family: PingFangSC-Regular;
      font-size: 14px;
      color: #333333;

      font-weight: bold;
    }
    .btnSumbit {
      text-align: center;
      width: 98px;
      height: 49px;
      background: #4fb0f9;
      font-family: PingFangSC-Medium;
      line-height: 49px;
      font-size: 14px;
      color: #ffffff;
    }
  }
}
</style>
